<template>
  <div v-loading.lock="loading"
    class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm"
        :inline="true"
        :model="queryForm">
        <el-form-item label="盘点编号"
          prop="checkNum">
          <el-input v-model="queryForm.checkNum"
            placeholder="盘点编号" />
        </el-form-item>
        <el-form-item label="盘点仓库"
          prop="storageName">
          <el-select v-model="queryForm.storageId"
            placeholder="请选择仓库"
            filterable
            clearable>
            <el-option v-for="item in storageList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态"
          prop="status">
          <el-select v-model="queryForm.status"
            placeholder="请选择"
            filterable
            clearable>
            <el-option v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="盘点负责人"
          prop="operatorName">
          <el-input v-model="queryForm.operatorName"
            placeholder="盘点负责人" />
        </el-form-item>
        <el-form-item label="创建时间"
          prop="createTimeArray">
          <el-date-picker v-model="createTimeArray"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>

      <div class="base-content-operate">
        <el-button type="primary"
          @click="add">新增</el-button>
      </div>
      <el-table ref="registTable"
        :data="list"
        highlight-current-row>
        <el-table-column label="盘点单编号">
          <template slot-scope="scope">
            <el-link type="primary"
              @click="view(scope.row)">
              {{ scope.row.checkNum }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="盘点仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column label="盘点负责人">
          <template slot-scope="scope">
            {{ scope.row.operatorName }}
          </template>
        </el-table-column>
        <el-table-column label="盘点开始时间">
          <template slot-scope="scope">
            {{ scope.row.startTime }}
          </template>
        </el-table-column>
        <el-table-column label="盘点结束时间">
          <template slot-scope="scope">
            {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <el-link v-if="scope.row.status == 100 || scope.row.status == 220"
                size="mini"
                type="primary"
                @click="edit(scope.row)">编辑</el-link>
              <el-link v-if="scope.row.status == 200"
                size="mini"
                type="primary"
                @click="Operate(scope.row)">处理</el-link>
              <el-link v-if="scope.row.status == 100 || scope.row.status == 220"
                size="mini"
                type="danger"
                @click="Repeal(scope.row)">作废</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange" />
    </div>

    <InventoryAdd v-if="dialogFormVisible"
      ref="InventoryAdd"
      :dialog-form-visible.sync="dialogFormVisible"
      @getListFun="getListFun" />
    <InventoryEdit v-if="dialogEditVisible"
      ref="InventoryEdit"
      :dialog-edit-visible.sync="dialogEditVisible"
      :edit-id="editId"
      @getListFun="getListFun" />
    <InventoryView v-if="dialogViewVisible"
      ref="InventoryView"
      :dialog-view-visible.sync="dialogViewVisible"
      :edit-id="viewId" />
    <InventoryOperate v-if="dialogOperateVisible"
      ref="InventoryOperate"
      :dialog-operate-visible.sync="dialogOperateVisible"
      :edit-id="operateId" />
  </div>
</template>

<script>
import { GetConfigByKey } from "../../../api/System/SystemDict.js";
import { getStorageList } from "../../../api/Material/Common.js";
import { getList, Repeal } from "../../../api/Material/MaterialInventoryCheck.js";
import InventoryAdd from "./InventoryAdd.vue";
import InventoryView from "./InventoryView.vue";
import InventoryOperate from "./InventoryOperate.vue";
import InventoryEdit from "./InventoryEdit.vue";
export default {
  name: "InventoryList",
  components: { InventoryAdd, InventoryEdit, InventoryView, InventoryOperate },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      dialogEditVisible: false,
      dialogViewVisible: false,
      dialogOperateVisible: false,
      viewId: "0",
      editId: "0",
      operateId: "0",
      storageList: [],
      list: [],
      formData: {
        id: 0,
        status: 0,
        statusName: ''
      },
      multipleSelection: [],
      statusOptions: [],
      createTimeArray: [],
      queryForm: {
        checkNum: '',
        storageId: null,
        status: null,
        operatorName: "",
        startCreateTime: '',
        endCreateTime: ''
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    view(row) {
      this.viewId = row.id
      this.dialogViewVisible = true;
    },
    Operate(row) {
      this.operateId = row.id
      this.dialogOperateVisible = true;
    },

    init() {
      // 查询字典表=>盘点单状态
      GetConfigByKey({ configKey: "MaterialInventoryCheck_Status" }).then((res) => {
        if (res.data != null && res.data.length > 0 && res.data[0].value != null) {
          this.statusOptions = JSON.parse(res.data[0].value);
        }
      });
      // 仓库下拉列表
      getStorageList().then(res => {
        this.storageList = res.data.dataList
      }).catch(res => {
      });
      this.getListFun();
    },
    add() {
      this.dialogFormVisible = true;
    },
    edit(row) {
      this.editId = row.id;
      this.dialogEditVisible = true;
    },
    Repeal(row) {
      this.$confirm('此操作将作废盘点单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Repeal({ Id: row.id }).then(res => {
          this.getListFun();
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.closeDialog()
        }).catch(res => { })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消作废'
        });
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getListFun();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getListFun();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getListFun();
    },
    getListFun() {
      this.loading = true;
      if (this.createTimeArray.length > 0) {
        this.queryForm.startCreateTime = this.createTimeArray[0];
        this.queryForm.endCreateTime = this.createTimeArray[1];
      }
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    onQuery() {
      this.pagination.pageIndex = 1;
      this.getListFun();
    },
  },
};
</script>
